---
permalink: "/navigation/behaviors/actions/new/index.xml"
tags: "Navigation/Behaviors/Actions"
hv_title: "New"
hv_button_behavior: "back"
---
{% extends 'templates/scrollview.xml.njk' %}
{% from 'macros/description/index.xml.njk' import description %}
{% from 'macros/button/index.xml.njk' import button %}

{% block styles %}
  <style
    id="input"
    borderBottomColor="#E1E1E1"
    borderBottomWidth="1"
    borderColor="#4E4D4D"
    flex="1"
    fontSize="16"
    fontWeight="normal"
    marginLeft="24"
    marginRight="24"
    paddingBottom="8"
    paddingTop="8">
    <modifier pressed="true">
    <style borderBottomColor="green"/>
    </modifier>
    <modifier focused="true">
    <style borderBottomColor="#4778FF"/>
    </modifier>
  </style>
{% endblock %}

{% block content %}
  {{ description('Tapping the button below will open a screen in a modal.') }}

  {% call button('New') -%}
    <behavior action="new" href="/hyperview/public/navigation/behaviors/actions/new/modal.xml" />
  {%- endcall %}

  {% call button('New with indicator') -%}
    <behavior action="new" href="/hyperview/public/navigation/behaviors/actions/new/modal.xml" show-during-load="loading-screen-modal" />
  {%- endcall %}

  {{ description('Tapping the button below will open a modal with query params from the form.') }}
  <form>
    {% call button('New with params') -%}
      <behavior action="new" href="/hyperview/public/navigation/behaviors/actions/new/modal.xml" show-during-load="loading-screen-modal" />
    {%- endcall %}
    <text-field style="input" name="param1" value="value1"/>
  </form>
{% endblock %}
